import React, { useState } from 'react';
import { request } from '@/api/request';
import { useTranslation } from 'react-i18next';
import { message } from 'antd';



const ForgetPassword: React.FC = () => {
    const { t, i18n } = useTranslation();
    const [email, setEmail] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError('');
        setLoading(true);

        // 根据当前语言设置language参数
        let language = 'EN'; // 默认英文
        if (i18n.language === 'zh') {
            language = 'CN';
        } else if (i18n.language === 'ja') {
            language = 'JP';
        }

        try {
            const res = await request.post('/api/visitor/request-password-reset', {
                "email": email,
                "language": language
            });

            if (res.data.success) {
                message.success(t('forgetPassword.success'));
                // 延迟跳转，让用户看到成功提示
                setTimeout(() => {
                    window.location.replace('/');
                }, 2000);
            } else {
                setError(res.data.message || t('forgetPassword.errors.requestFailed'));
            }
        } catch (err) {
            setError(t('forgetPassword.errors.networkError'));
        } finally {
            setLoading(false);
        }
    };

    return (
        <div style={{ width: '100%' }} className="min-h-screen bg-app-dark text-white flex w-full min-w-0 flex-col">
            {/* 主内容区 */}
            <div className="flex w-full min-w-0 flex-1">
                <div className="flex-1 w-full">
                    {/* 占位 */}
                    {/* <div className="p-8 w-full h-10">
                    </div> */}
                    {/* Reset Password Form */}
                    <div className="flex flex-col justify-center pt-0 sm:px-6 lg:px-8 bg-neutral-950">
                        <div className="p-4 sm:p-6 sm:mx-auto sm:w-full sm:max-w-[480px] relative z-10">
                            <div className="bg-stone-900 p-4 sm:p-6 shadow-2xs rounded-lg border border-neutral-700 text-center">
                                <h1 className="text-white text-xl font-semibold leading-loose mb-3">{t('forgetPassword.title')}</h1>
                                <div className="px-2 sm:px-6 text-center text-neutral-400 text-sm font-medium leading-tight">{t('forgetPassword.subtitle')}</div>
                                <form className="simple_form mt-6" id="new_user" noValidate onSubmit={handleSubmit}>
                                    <div className="form-inputs mb-3 px-4 sm:px-10">
                                        <div className="w-full flex-col justify-start items-start gap-1.5 inline-flex">
                                            <div className="self-stretch flex-col justify-start items-start gap-1.5 flex relative">
                                                <div className="w-5 h-5 absolute top-[13px] left-[10px]">
                                                    <svg className="text-[#8D8D8D]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
                                                        <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"></path>
                                                    </svg>
                                                </div>
                                                <input
                                                    placeholder={t('forgetPassword.email')}
                                                    type="email"
                                                    required
                                                    className="self-stretch pl-10 px-3.5 py-2.5 rounded-lg shadow-2xs border border-[#363636] justify-start items-center gap-2 inline-flex text-white bg-stone-900"
                                                    name="user[email]"
                                                    id="user_email"
                                                    value={email}
                                                    onChange={e => setEmail(e.target.value)}
                                                    disabled={loading}
                                                />
                                            </div>
                                        </div>

                                        {error && <div className="text-red-500 text-sm mb-2 px-4 sm:px-10">{error}</div>}
                                        <button
                                            name="button"
                                            type="submit"
                                            className="w-[100%]  mt-4 px-4 py-3 bg-[#E75275] rounded-[10px] border border-[#E75275] justify-center items-center gap-2 inline-flex text-white"
                                            id="signup-btn"
                                            disabled={loading}
                                        >
                                            {loading ? t('forgetPassword.sending') : t('forgetPassword.submit')}
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/* 登录弹窗 */}
            {/* {loginState.showLoginModal && (
                <LoginModal
                    show={loginState.showLoginModal}
                    onClose={() => setLoginState(s => ({ ...s, showLoginModal: false }))}
                    activeTab={activeTab}
                    onLoginSuccess={() => setLoginState(s => ({ ...s, showLoginModal: false }))}
                />
            )} */}
        </div>
    );
};

export default ForgetPassword;